<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<%=path%>/js/jquery.min.js"></script>

	<link rel="stylesheet" type="text/css" href="<%=path%>/jsplug/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="<%=path%>/jsplug/easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="<%=path%>/jsplug/easyui/demo/demo.css">
	<script type="text/javascript" src="<%=path%>/jsplug/easyui/jquery.easyui.min.js"></script>
</head>
<body>
	
	<div id="treeDiv" style="width:300px;">
		<ul id="tree1" ></ul>
		<hr/>
		<div>xml树结构</div>
		<ul id="tree2" ></ul>
	</div>
	
	
	<div id="testDiv">
		<ul id="tree3" ></ul>
	</div>	
	
	<script type="text/javascript">
		$(function(){
			$.ajax({
		        url:"<%=path%>/handler_xmlTree.action",
		        type: 'post',
		        dataType: 'xml',
		        timeout: 3000,
		        error: function(){
		            alert('加载数据失败...');
		        },
		        success:function(xml){
		        	//xml 指定显示node树结构
					var tree1 = $("#tree1");
					loadXmlNodeToTree(tree1, $(xml).children(), ["name","vid"]);
					tree1.tree({
						onClick: function(node){
								alert(node.text); 
						}
					});
					tree1.tree("collapseAll");
					
					//xml树结构
					var tree2 = $("#tree2");
					loadXmlToTree(tree2, $(xml).children());
					tree2.tree();
					tree2.tree("collapseAll");
					
				}
		    });
		});
		
		/**
		 *功能：加载xml各个节点下的某个节点值作为节点显示名字
		 * li: 要追加到的ul, tree的各节点
		 * node: xml数据
		 * array: tree节点显示名字,可以指定2个(目前只支持两个),如果第一个元素没有找到, 则找第二个
		 *        如果每一个节点都含有第一个元素，则会都显示一个元素
		 */
		function loadXmlNodeToTree(li, node, nodeName) {
			var tagValue = "";
			var li_bak = null;
			var flag = true;
			var arrayFlag0 = 0;
			var arrayFlag1 = 0;
			for ( var i = 0; i < node.length; i++) {
				var tag = node[i].tagName;
				var nodeLength = parseInt($(node[i]).children().length);
				var li2 = $("<li>");
				var span = $("<span>");
				var ul = $("<ul>");
				if(nodeLength > 0){
					if(li_bak == null){
						loadXmlNodeToTree(li, $(node[i]).children(), nodeName);
					}else{
						loadXmlNodeToTree(li_bak, $(node[i]).children(), nodeName);
					}
				}else if(nodeLength == 0){
					tagValue = node[i].firstChild.nodeValue;
					if(tag == nodeName[0]){
						arrayFlag0 = tagValue;
						if(arrayFlag1 != 0){ 
							li_bak.parent().children("span:eq(0)").html(node[i].firstChild.nodeValue);
						}else{
							span.html(node[i].firstChild.nodeValue);
							li2.append(span);
							if(li_bak == null){
								li.append(li2);
								li2.append(ul);
								li_bak = ul;
							}else{
								li_bak.append(li2);
							}
						}
					}else if(tag ==nodeName[1]){
						if(arrayFlag0 == 0){
							arrayFlag1 = tagValue;
							span.html(node[i].firstChild.nodeValue);
							li2.append(span);
							if(li_bak == null){
								li.append(li2);
								li2.append(ul);
								li_bak = ul;
							}else{
								li_bak.append(li2);
							}
						}
					}
				}
			}
		}
		
		/**
		 *功能：加载xml,显示xml树形结构
		 */
		function loadXmlToTree(li, node) {
			var tagValue = "";
			for ( var i = 0; i < node.length; i++) {
				var tag = node[i].tagName;
				var nodeLength = parseInt($(node[i]).children().length);
				var li2 = $("<li>");
				var span = $("<span>");
				var ul = $("<ul>");
				
				span.html(tag);
				li2.append(span);
				li.append(li2);
				
				if(nodeLength > 0){
					li2.append(ul);
					loadXmlToTree(ul, $(node[i]).children());
				}
			}
		}
		
	</script>
	
</body>
</html>